<template>
  <div class="photo_group">
    <div class="photo_group_title">
      {{imageTitle}}
    </div>
    <div class="photo_group_content">
      <div @click="goBigPhoto(index)" v-for="(item,index) in imgData">
        <img :src="item.file_url" :alt="item.file_name">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String
      },
      imgData: {
        type: Array
      },
      openBigPhoto: {
        type: Function
      }
    },
    name: 'PhotoGroup',
    data() {
      return {}
    },
    computed: {
      imageTitle: {
        get() {
          return this.title
        },
        set() {

        }
      }
    },
    methods: {
      goBigPhoto(index) {
        this.$store.commit('setData', this.imgData);
        this.$store.commit('setIndex', index);
        if (this.imageTitle === '效果图') {
          this.$store.commit('setImageType', 0);
        }
        else if (this.imageTitle === '实景图') {
          this.$store.commit('setImageType', 1);
        }
        else if (this.imageTitle === '样板间图') {
          this.$store.commit('setImageType', 2);
        }
        else if (this.imageTitle === '户型图') {
          this.$store.commit('setImageType', 3);
        }
        else if (this.imageTitle === '交通图') {
          this.$store.commit('setImageType', 4);
        }
        this.openBigPhoto();
      }
    }
  }
</script>

<style scoped>
  .photo_group {

  }

  .photo_group .photo_group_title {
    padding: 10px;
  }

  .photo_group .photo_group_content {
    display: flex;
    flex-wrap: wrap;
    /*padding: 10px;*/
  }

  .photo_group .photo_group_content > div {
    width: calc(100% / 3 - 10px);
    margin: 5px;
  }

  .photo_group .photo_group_content > div img {
    width: 100%;
    height: 80px
  }
</style>
